import React, { Component } from 'react';
// import {connect} from 'react-redux';
import {actions} from './_index.js';
import { useSelector, useDispatch } from "react-redux";
/**
redux hook
1、
import { useSelector, useDispatch } from "react-redux";

2、
const first = useSelector(state => state.first);
const state = useSelector(state => state);
const dispatch = useDispatch();
其他不变
*/
const View = (props)=>{
    const first = useSelector(state => state.first);
    const state = useSelector(state => state);
    const dispatch = useDispatch();

    const test = ()=>{
        dispatch(actions.add('id'))
    }
    const lists= ()=>{
        const list = first.map((val,key)=>{
            return(
                <li key={key}>
                       <span>{val.text}</span>
                </li>
            )
        })
        return list;
    }
    return(
        <div>111
<div onClick={()=>{test()}}>点我点2222</div>
                <ul>{first.length!==0 ? lists() : ''}</ul>

        </div>
    )
}
export default View;

//
// class View extends Component {
//     constructor(props){
//
//         super(props);
//         // const { dispatch } = props;
//         // this.boundActions = bindActionCreators(actions, dispatch);
//     }
//     lists(){
//         const list = this.props.data.map((val,key)=>{
//             return(
//                 <li key={key}>
//                        <span>{val.text}</span>
//                 </li>
//             )
//         })
//         return list;
//     }
//     test(){
//         // connect(mapStateToProps,null)(View);
//         // 只有第二个参数 为空时  才 可以直接使用this.props 否则页面无法获取
//         const {dispatch} = this.props;
//         dispatch(actions.add('id'))
//         // console.log(this.props)
//     }
//     componentDidMount(){
//         // this.test()
//     }
//     render(){
//         const { onAdd ,data} = this.props;
//
//         // console.log(data)
//         return(
//             <React.Fragment>
//                 <div onClick={onAdd}>点我点1111</div>
//                 <div onClick={()=>{this.test()}}>点我点2222</div>
//                 <ul>{data.length!==0 ? this.lists() : ''}</ul>
//
//             </React.Fragment>
//         )
//     }
// }
//
// //需要渲染什么数据
// //作为函数，mapStateToProps执行后应该返回一个对象
// function mapStateToProps(state) {
//   return {
//       data:state.first
//   }
// }
// //是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。
// // const mapDispatchToProps = (dispatch, ownProps) => {
// // 	return {
// // 		onAdd: () => dispatch(actions.add('id'))
// // 	}
// // };
// export default connect(mapStateToProps,null)(View);
